<!--
 * @Author: huangtianyang 916072572@qq.com
 * @Date: 2023-05-16 18:17:16
 * @LastEditors: huangtianyang
 * @LastEditTime: 2023-05-25 09:49:17
 * @FilePath: \cxl-h5\src\components\uploadFile\Index.vue
-->
<template>
    <section class="uploadfile" v-if="isPc">
        <input type="file" ref="fileRef" accept=".jpg,.jpeg,.png" @change="onGetFile" />
    </section>
</template>

<script setup lang="ts">
import { isPC } from '@/utils'
import { onMounted, ref } from 'vue'

const emits = defineEmits(['base64'])

const fileRef = ref()

const isPc = ref(false)

onMounted(() => {
    isPc.value = isPC()
})

const onGetFile = () => {
    console.log(fileRef.value.files)

    var reader = new FileReader()
    reader.onload = (file: any) => {
        console.info(file) //这个就是base64的数据了
        emits('base64', file.target.result)
    }
    reader.readAsDataURL(fileRef.value.files[0])
}
</script>

<style scoped lang="scss">
.uploadfile {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
    input {
        width: 100%;
        height: 100%;
        opacity: 0;
    }
}
</style>
